<%--
  User: Егор
  Date: 07.08.12
  Time: 12:43
--%>
<script type="text/javascript">

    jq(function() {
        jq("#grid").jqGrid({
            url:'/approver/reports',
            datatype: 'json',
            mtype: 'GET',
            colNames:['ID','Employee Name','Week','Lodging', 'Meals','Transportation','Personal','Misc','Total','Actions'],
            colModel:[
                {name: 'id', index:'id', editable:false,editoptions:{readonly:true,size:10},hidden:true},
                {name:'employeeName',index:'employee_name', width:55, align: "center",editable:false},
                {name:'week',index:'week', width:55,align: 'center',editable:false},
                {name:'lodging',index:'lodging', width:55,align: "center",editable:true,editrules:{required:true},editoptions:{size:10}},
                {name:'meals',index:'meals', width:55,align: "center",editable:true,editrules:{required:true},editoptions:{size:10}},
                {name:'transportation',index:'transportation', width:55,align: "center",editable:true,editrules:{required:true},editoptions:{size:10}},
                {name:'personal',index:'personal', width:55,align: "center",editable:true,editrules:{required:true},editoptions:{size:10}},
                {name:'misc',index:'misc', width:55,align: "center",editable:true,editrules:{required:true},editoptions:{size:10}},
                {name:'total',index:'total', width:55,align: "center",editable:false},
                {name:'act',index:'act', width:55,align:"center" ,sortable:false,editable:false}
            ],
            postData: {
            },
            rowNum:20,
            rowList:[20,40,60],
            height: 300,
            autowidth: true,
            rownumbers: true,
            pager: '#pager',
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            caption:"Approver Reports",
            emptyrecords: "Empty records",
            loadonce: false,
            loadComplete: function() {
            },
            gridComplete: function(){
                var ids = jQuery("#grid").jqGrid('getDataIDs');
                for(var i=0;i < ids.length;i++){
                    var recordId = ids[i];
                    edit_button = "<input style='height:22px;width:50px;' type='button' value='Edit' onclick=\"editRow("+recordId+");\"  />";
                    approve_button = "<input style='height:22px;width:60px;' type='button' value='Approve' onclick=\"approveReport("+recordId+")\"  />";
                    jQuery("#grid").jqGrid('setRowData',ids[i],{act:edit_button+approve_button});
                }
            },
            jsonReader : {
                root: "rows",
                page: "pageNumber",
                total: "pageCount",
                records: "recordsCount",
                repeatitems: false,
                cell: "cell",
                id: "id"
            }
        });
        jq("#grid").jqGrid('navGrid','#pager',
                {edit:false,add:false,del:false,search:true},
                { },
                { },
                { },
                {
                    sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
                    closeOnEscape: true,
                    multipleSearch: true,
                    closeAfterSearch: true }
        );

    });
</script>
<script>
    function editRow(rid) {
        jQuery("#grid").jqGrid('setSelection',rid);
        var row = jq("#grid").jqGrid('getGridParam','selrow');

        if( row != null )
            jq("#grid").jqGrid('editGridRow',row,
                    { url: "approver/report/edit",
                        editData: {
                        },
                        recreateForm: true,
                        beforeShowForm: function(form) {
                        },
                        closeAfterEdit: true,
                        reloadAfterSubmit:false,
                        afterSubmit : function(response, postdata)
                        {
                            var result = eval('(' + response.responseText + ')');
                            var errors = "";

                            if (result.success == false) {
                                for (var i = 0; i < result.message.length; i++) {
                                    errors +=  result.message[i] + "";

                                }
                            }  else {
                                jq("#dialog").text('Entry has been edited successfully');
                                jq("#dialog").dialog(
                                        { title: 'Success',
                                            modal: true,
                                            buttons: {"Ok": function()  {
                                                jq(this).dialog("close");}
                                            }
                                        });
                            }

                            return [result.success, errors, null];
                        }
                    });
        else jq( "#dialogSelectRow" ).dialog();
    }
    function approveReport(rid) {
        jQuery("#grid").jqGrid('setSelection',rid);
        var row = jq("#grid").jqGrid('getGridParam','selrow');

        if( row != null )
            jq("#grid").jqGrid( 'delGridRow', row,
                    { url: '/approver/report/approved',
                        recreateForm: true,
                        beforeShowForm: function(form) {

                            jq(".delmsg").replaceWith('<span style="white-space: pre;">' +
                                    'Approve selected report?' + '</span>');

                            //hide arrows
                            jq('#pData').hide();
                            jq('#nData').hide();
                        },
                        reloadAfterSubmit:false,
                        closeAfterDelete: true,
                        afterSubmit : function(response, postdata)
                        {
                            var result = eval('(' + response.responseText + ')');
                            var errors = "";

                            if (result.success == false) {
                                for (var i = 0; i < result.message.length; i++) {
                                    errors +=  result.message[i] + " ";

                                }
                            }  else {
                                jq("#dialog").text('Entry has been approved successfully');
                                jq("#dialog").dialog(
                                        { title: 'Success',
                                            modal: true,
                                            buttons: {"Ok": function()  {
                                                jq(this).dialog("close");}
                                            }
                                        });
                            }

                            var new_id = null;

                            return [result.success, errors, new_id];
                        }
                    });
        else jq( "#dialogSelectRow" ).dialog();
    }
</script>
<div id="jqgrid">
    <table id="grid"></table>
    <div id="pager"></div>
</div>

<div id="dialog" title="Feature not supported" style="display:none">
    <p>That feature is not supported.</p>
</div>

<div id="dialogSelectRow" title="Warning" style="display:none">
    <p>Please select row</p>
</div>